// Name:            Tooltip
// Description:     Defines styles for tooltips
//
// Component:       `uk-tooltip`
//
// Modifiers        `uk-tooltip-top`
//                  `uk-tooltip-top-left`
//                  `uk-tooltip-top-right`
//                  `uk-tooltip-bottom`
//                  `uk-tooltip-bottom-left`
//                  `uk-tooltip-bottom-right`
//                  `uk-tooltip-left`
//                  `uk-tooltip-right`
//
// ========================================================================


// Variables
// ========================================================================

@tooltip-z-index: 1030;
@tooltip-max-width: 200px;
@tooltip-padding-vertical: 5px;
@tooltip-padding-horizontal: 8px;
@tooltip-background: #333;
@tooltip-triangle-size: 5px;

@tooltip-color: rgba(255, 255, 255, 0.7);
@tooltip-font-size: 12px;
@tooltip-line-height: 18px;

@tooltip-offset-horizontal: 10px;


/* ========================================================================
   Component: Tooltip
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set fixed position
 * 3. Set dimensions
 * 4. Set style
 */

.uk-tooltip {
  /* 1 */
  display: none;
  /* 2 */
  position: absolute;
  z-index: @tooltip-z-index;
  /* 3 */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: @tooltip-max-width;
  padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
  /* 4 */
  background: @tooltip-background;
  color: @tooltip-color;
  font-size: @tooltip-font-size;
  line-height: @tooltip-line-height;
  text-align: center;
  .hook-tooltip;
}


/* Triangle
 ========================================================================== */

/*
 * 1. Dashed is less antialised than solid
 */

.uk-tooltip:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  /* 1 */
  border: @tooltip-triangle-size dashed @tooltip-background;
}


/* Direction modifiers
 ========================================================================== */

/*
 * Top
 */

.uk-tooltip-top:after,
.uk-tooltip-top-left:after,
.uk-tooltip-top-right:after {
  bottom: -@tooltip-triangle-size;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: @tooltip-background;
}

/*
 * Bottom
 */

.uk-tooltip-bottom:after,
.uk-tooltip-bottom-left:after,
.uk-tooltip-bottom-right:after {
  top: -@tooltip-triangle-size;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: @tooltip-background;
}

/*
 * Top/Bottom center
 */

.uk-tooltip-top:after,
.uk-tooltip-bottom:after {
  left: 50%;
  margin-left: -@tooltip-triangle-size;
}

/*
 * Top/Bottom left
 */

.uk-tooltip-top-left:after,
.uk-tooltip-bottom-left:after {
  left: @tooltip-offset-horizontal;
}

/*
 * Top/Bottom right
 */

.uk-tooltip-top-right:after,
.uk-tooltip-bottom-right:after {
  right: @tooltip-offset-horizontal;
}

/*
 * Left
 */

.uk-tooltip-left:after {
  right: -@tooltip-triangle-size;
  top: 50%;
  margin-top: -@tooltip-triangle-size;
  border-left-style: solid;
  border-right: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: @tooltip-background;
}

/*
 * Right
 */

.uk-tooltip-right:after {
  left: -@tooltip-triangle-size;
  top: 50%;
  margin-top: -@tooltip-triangle-size;
  border-right-style: solid;
  border-left: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: @tooltip-background;
}


// Hooks
// ========================================================================

.hook-tooltip-misc;

.hook-tooltip() {
}

.hook-tooltip-misc() {
}